<template>
  <div>
    <span>动态表单校验</span>
    <el-row>
      <el-col :span='12'>
        <span>请选择通道数目</span>
        <el-select
          v-model='passageway.count'
          clearable
          placeholder='请选择通道数目'
          @change='changeCount'
          style='width: 220px; margin-left: 20px'
        >
          <el-option
            v-for='item in countArr'
            :label='item.label'
            :key='item.value'
            :value='item.value'
          />
        </el-select>
      </el-col>
    </el-row>

    <div v-for='(item, index) in dynamicFormData' :key='index'>
      <el-form
        :model='item'
        label-position='right'
        label-width='100px'
        ref='dynamicForm'
        size='small'
        :inline='true'
        label-suffix='：'
      >
        <div class='p-title'>通道{{ index + 1 }}</div>
        <!-- 第一行 -->
        <el-row>
          <el-col :span='8'>
            <el-form-item
              label='通道名称'
              prop='channelName'
              :rules="[
                    {
                      required: true,
                      message: '通道名称不能为空',
                      trigger: ['blur', 'change'],
                    },
                  ]"
            >
              <el-input
                type='text'
                v-model='item.channelName'
                style='width: 220px'
                clearable
                maxlength='50'
                placeholder='请输入通道名称'
              />
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='设备类型' prop='terminalType' :rules="[
                    {
                      required: true,
                      message: '设备类型不能为空',
                      trigger: ['blur','change'],
                    },
                  ]">
              <el-select v-model='item.terminalType' placeholder='请选择设备类型' style='width: 220px' clearable>
                <el-option
                  v-for='item in deviceType'
                  :key='item.value'
                  :label='item.label'
                  :value='item.value'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='摄像机种类' prop='vidiconSpecies'>
              <el-input
                type='text'
                v-model='item.vidiconSpecies'
                clearable
                maxlength='50'
                style='width: 220px'
                placeholder='请输入摄像机种类'
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row>
          <el-col :span='8'>
            <el-form-item label='型号' prop='model'>
              <el-input
                type='text'
                v-model='item.model'
                style='width: 220px'
                clearable
                maxlength='50'
                placeholder='请输入型号'
              />
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='生产厂家' prop='productionFactory'>
              <el-input
                type='text'
                v-model='item.productionFactory'
                style='width: 220px'
                clearable
                maxlength='50'
                placeholder='请输入生产厂家'
              />
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='安装地点' prop='installAddress'>
              <el-input
                type='text'
                v-model='item.installAddress'
                style='width: 220px'
                clearable
                maxlength='50'
                placeholder='请输入安装地点'
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row>
          <el-col :span='8'>
            <el-form-item label='使用状态' prop='usedState'>
              <el-radio v-model='item.usedState' label='1'>启用</el-radio>
              <el-radio v-model='item.usedState' label='0'>停用</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='云台功能' prop='cloudPlatformFunction'>
              <el-radio v-model='item.cloudPlatformFunction' label='1'
              >启用
              </el-radio
              >
              <el-radio v-model='item.cloudPlatformFunction' label='0'
              >停用
              </el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label='物理通道' prop='physicalChannel'>
              <el-input
                type='text'
                v-model='item.physicalChannel'
                style='width: 220px'
                clearable
                maxlength='50'
                placeholder='请输入终端型号'
              />
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
    </div>

    <el-button type='primary' @click='submitForm' v-if='passageway.count'
               icon='el-icon-check' title='提交' :disabled='state'>提交
    </el-button>


    <el-select v-model='value' placeholder='请选择' style='margin-top:15px'>
      <el-option
        v-for='item in options'
        :key='item.value'
        :label='item.label'
        :value='item.value'>
        @visible-change = "changeArr"
      </el-option>
    </el-select>


    <el-divider></el-divider>
    <el-select v-model='selected' placeholder='请选择' class='custom-select' clearable>
      <el-option label='选项1' value='option1'></el-option>
      <el-option label='选项2' value='option2'></el-option>
      <el-option label='选项3' value='option3'></el-option>
    </el-select>

    <el-divider></el-divider>
    <el-select v-model='selectedValue' :popper-class='popperClass'>
      <el-option v-for='option in options' :key='option.value' :label='option.label' :value='option.value'></el-option>
    </el-select>

    <el-divider></el-divider>
    <el-button style='background-color: #EEB4B4; border-color: #EEB4B4; color: white;'> Button</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: true,
      selected: null,
      selectedValue: null,
      passageway: {
        count: 3 // 默认通道数量
      },
      value: '',
      options: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
        { label: 3, value: 3 }
      ],
      popperClass: 'my-popper',
      countArr: [], // 通道数量下拉框
      dynamicFormData: [],// 表单数组
      deviceType: [ // 设备类型
        { label: '车载视频设备', value: 1 },
        { label: '电动采集器', value: 2 },
        { label: '数据中心一体机', value: 3 }
      ],
      passageway_cache: [], // 保存上一次表单数据
      p_change: false
    }
  },
  created() {
    this.initCount()
    this.initCountData()
  },
  methods: {

    changeArr() {
      console.log(1)
    },

    // 通道数目0-12
    initCount() {
      for (let i = 0; i <= 12; i++) {
        this.countArr.push({
          label: i,
          value: i
        })
      }
    },

    // 通道数目变化
    changeCount(e) {
      // 保存
      console.log('todo:', this.dynamicFormData)

      this.p_change = true
      this.passageway.count = e
      this.initCountData()
    },

    // 初始化通道表单数组
    initCountData() {

      this.dynamicFormData = []

      if (!this.p_change) {
        for (let i = 0; i < this.passageway.count; i++) {
          this.dynamicFormData.push(Object.assign({}, {
            channelName: 'CH' + (i + 1),
            terminalType: null,
            vidiconSpecies: null,
            model: null,
            productionFactory: null,
            installAddress: null,
            usedState: '1',
            cloudPlatformFunction: '1',
            physicalChannel: null
          }))
        }
        console.log('初始化：', this.dynamicFormData)
      } else {
        // 把cache的数据赋给表单数据

        // 修改后的通道数  this.passageway.count   2

        // 上一次的通道数   this.passage_cache.length   4

        console.log('cache:', this.passageway_cache)
        let temp = []
        if (this.passageway_cache.length >= this.passageway.count) {
        }
      }
    },

    // 校验表单
    submitForm() {
      localStorage.setItem('test', 'this is a book')
      // 多个表单进行校验的标识

      let temp = []
      for (let i = 0; i < this.passageway.count; i++) {

        let p = new Promise((resolve, reject) => {
          this.$refs['dynamicForm'][i].validate().then(res => {
            resolve(1)
          }).catch((err) => {
            reject(0)
          })
        })
        temp.push(p)
      }


      Promise.all(temp).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.p-title {
  font-size: 16px;
  font-weight: 700;
  width: 88%;
  height: 30px;
  line-height: 30px;
  background: #d9d9d9;
  margin: 3px auto 10px auto;
}

.custom-select .el-input__inner {
  font-size: 16px;
  color: #333;
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
}

.custom-select .el-select-dropdown {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
}

.custom-select .el-select-dropdown .el-scrollbar__wrap {
  max-height: 200px;
}

.my-popper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
}
</style>
